<xsl:stylesheet version="1.1" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="no" encoding="UTF-8" />

<xsl:template match="mail">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title><xsl:value-of select="@title" /></title>
		<style type="text/css">
<![CDATA[
    body, p, ul, #content, table { text-align:left; font-family:Verdana, sans-serif; font-size:12px; }
    .maincontent { width:679px; }
    img.header { margin-left:22px;float:left; }
    h5 { margin:0px;font-family:verdana, sans-serif;font-size:12px;line-height:15px;text-align:right; }
    center { font-family:Verdana, sans-serif; font-size:12px; }
    #topborder { clear:both;margin-left:22px;margin-right:24px;border:solid #498fc0;border-width:5px 5px 0px 5px;height:0px;line-height:7px; }
    #content { lear:both;margin-left:22px;margin-right:24px;border:solid #498fc0;border-width:0px 5px;padding-top:1px; }
    #content div { padding:10px;padding-top:0px;text-align:left; }
    #separator {  }
    #separator img { float:left;margin-left:3px; }
    #separator div { height:75px;float:left;display:inline;border-right:5px solid #498fc0; }
    #separator h2 { margin-right:0x;width:568px;padding:0px;line-height:22px;padding-bottom:3px;margin-top:21px;float:left;background-color:#498fc0;text-align:right;display:inline;font-size:14px;color:white; }
    #separator h2 span { padding-right:30px; }
    #bottomborder { border-top:5px solid #498fc0;margin-left:22px;margin-right:24px; }
    dt { float:left;width:150px; }
    p.online { text-align:right;font-size:.75em; }
    p.hidden { visibility:hidden;display:none; }
]]></style>
	</head>
<body style="font-family:Verdana, sans-serif; font-size:12px;">
<center>
<table align="center" width="681" cellpadding="0" cellspacing="0">
	<tr>
                <td style="font-family:Verdana, sans-serif; font-size:12px;" width="681">
			<div style="width:679px" class="maincontent">
				<img class="header" src="{@header-image}" height="194px" width="635px" alt="Solidamentum mail kring Ede-Wageningen" style="margin-left:22px;float:left">
					<xsl:if test="@url"><!-- url where the bulletin is hosted -->
						<xsl:attribute name="alt">--------- Indien deze bulletin niet goed te lezen is, plak de volgende url in je browser:<xsl:value-of select="@url"/>---------</xsl:attribute>
					</xsl:if>
				</img>
				<div id="topborder" style="clear:both;margin-left:22px;margin-right:24px;border:solid #498fc0;border-width:5px 5px 0px 5px;height:0px;line-height:7px;">

					<h5 style="margin:0px;font-family:verdana, sans-serif;font-size:12px;line-height:15px;text-align:right;"><xsl:value-of select="@bulletin-nr"/>&#160;&#160;</h5>
				</div>
				<!-- apply sections here -->
				<xsl:apply-templates />

				<div id="bottomborder" style="border-top:5px solid #498fc0;margin-left:22px;margin-right:24px"></div>
			</div>
</td></tr></table>
</center>
</body>
</html>
</xsl:template>

<xsl:template name="index">
	<ul class="index" style="border:1px solid #8dc0ff;padding:10px;margin-left:0px;background-color:#3568a7;color:#FFFFFF;">
		<xsl:for-each select="section">
			<li style="list-style-type:none;"><a href="#section{position()}" style="color:#FFFFFF;text-decoration:none;"><xsl:value-of select="@title" /></a></li>
		</xsl:for-each>
	</ul>
</xsl:template>

<xsl:template match="table">
	<table cellpadding="0px" cellspacing="0px" style="text-align:left; font-family:Verdana, sans-serif; font-size:12px;">
		<xsl:copy-of select="@*" />
		<xsl:apply-templates />
	</table>
</xsl:template>

<xsl:template match="section">
	<xsl:if test="preceding-sibling::section">
		<xsl:call-template name="separator"/>
	</xsl:if>

	<div id="content" style="clear:both;margin-left:22px;margin-right:24px;border:solid #498fc0;border-width:0px 5px;padding-top:1px;">
		<div style="padding:10px;padding-top:0px;text-align:left;">
			<xsl:apply-templates />
		</div>
	</div>
</xsl:template>

<xsl:template match="reply">
	<a href="mailto:{/mail/@from}?subject={@subject}&amp;body={@body}">
		<!--xsl:attribute name="href">
			mailto:<xsl:value-of select="/@name" />&lt;<xsl:value-of select="/@from" />&gt;?
			subject=<xsl:value-of select="@subject" />&amp;body=<xsl:value-of select="@body" />
		</xsl:attribute-->
		<xsl:apply-templates />
	</a>
</xsl:template>

<xsl:template match="*">
	<xsl:copy>
		<xsl:copy-of select="@*" />
		<xsl:apply-templates />
	</xsl:copy>
</xsl:template>
<xsl:template match="text()">
	<xsl:copy-of select="." />
</xsl:template>

<xsl:template name="separator">
	<div id="separator" style="">
		<div style="height:75px;float:left;display:inline;border-right:5px solid #498fc0;">
			<img width="79px" height="75px" alt="" style="float:left;margin-left:3px" src="{/mail/@separator-img}"/>
			<h2 style="margin-right:0x;width:568px;padding:0px;line-height:22px;padding-bottom:3px;margin-top:21px;float:left;background-color:#498fc0;text-align:right;display:inline;font-size:14px;color:white"><xsl:value-of select="@title"/><span style="padding-right:30px"></span></h2>
		</div>
	</div>
</xsl:template>

</xsl:stylesheet>
